<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="./css/jquery.mobile-1.4.5.min.css">
		<script src="./js/jquery-2.2.2.js"></script>
		<script src="./js/jquery.mobile-1.4.5.min.js"></script>
		<style type="text/css">
			*,
			body {
				margin: 0;
				padding: 0;
				border: none;
				text-shadow: none;
			}
			
			.ui-page {
				background: #ffffff;
			}
			th {
				border-bottom: 1px solid #d6d6d6;
			}

			tr:nth-child(even) {
				background: #e9e9e9;
			}

		</style>
		<script type="text/javascript">
		
		//打印内容列表
		var prinContentList = new Array()


			$(document).ready(function() {
               
			});

			$(document).on("pageshow","#page1",function(){ // 当进入页面二时
			   console.log("现在切换到了页面1")
			});
			$(document).on("pageshow","#page2",function(){ // 当进入页面二时
			         console.log("现在切换到了页面2")
					 $("#myTable>tbody>tr").remove();
					 showTable();

			});
			$(document).on("pageshow","#page3",function(){ // 当进入页面二时
			console.log("现在切换到了页面3")
			});
			
			// 获取表单值
			function getFormValue(){
				var lineNo = $("#lineNo").val();    
				var printContent = $("#printContent").val();     
				var fontsize = $("#fontsize").val();    
				var duiji = $("#duiji").val();   
				var prinType = $("#prinType").val();    
				var ifVisibelYiweimaContent = $("#ifVisibelYiweimaContent").val();    			
			    console.log('行号：'+lineNo);
				console.log('打印内容：'+printContent);
			    console.log('字体大小：'+fontsize);
				console.log('对齐方式：'+duiji);
			    console.log('打印类型：'+prinType);
				console.log('是否显示一维码内容：'+ifVisibelYiweimaContent);	
				
				// 校验
					if(!(/(^[1-9]\d*$)/.test(lineNo))){
						alert("行号只能输入正整数！");
						$("#lineNo").val('');  	
						return;
					}
					
					
					// 一维码不能包含中文，并且长度不能大于30
					if(prinType=="2"){
					   if(printContent.replace(/[^\u0000-\u00ff]/g,"aa").length>printContent.length||printContent.length>30){
						alert("一维码不能包含中文 并且长度要小于30！");
						$("#printContent").val('');  	
						return;
					   }
					}
				//end 校验
				
				
               var record={"lineNo":lineNo,"printContent":printContent,"fontsize":fontsize,"duiji":duiji,"prinType":prinType,"ifVisibelYiweimaContent":ifVisibelYiweimaContent}

			   // 存在则编辑覆盖
			   let ifEdit=0;
			   for(var i=0;i<prinContentList.length;i++)
			   {
				   let lineNo22=prinContentList[i].lineNo;
				   if(lineNo22==record.lineNo){
					ifEdit=1;
					prinContentList[i].printContent=record.printContent;
					prinContentList[i].fontsize=record.fontsize;
					prinContentList[i].duiji=record.duiji;
					prinContentList[i].prinType=record.prinType;
					prinContentList[i].ifVisibelYiweimaContent=record.ifVisibelYiweimaContent;

				   }

			   }

			   // 不存在行号则新增，否则编辑
			   if(ifEdit==0){
			     prinContentList.push(record);
			   }
			  
			   console.log("数组长度："+prinContentList.length);
			   console.log(prinContentList);
		
				
			}

			function showTable(){
				if(prinContentList.length==0)
				{
					 return ;
				}
				$("#myTable>tbody>tr").remove();
				for(var i=0;i<prinContentList.length;i++){
					let strDuiqi="";
					if(prinContentList[i].duiji=="1"){
						strDuiqi="居中";
					}
					if(prinContentList[i].duiji=="2"){
						strDuiqi="左对齐";	
					}
					if(prinContentList[i].duiji=="3"){
						strDuiqi="右对齐";
					}
					let trHtml="<tr><td>"+prinContentList[i].lineNo+"</td><td>"+prinContentList[i].printContent+"</td><td ><span onclick='editFrom("+prinContentList[i].lineNo+")'>编辑</span>&nbsp;&nbsp;<span onclick='deleteRecord("+prinContentList[i].lineNo+")'>删除</span></td><td>"+strDuiqi+"</td></tr>"
					$("#myTable>tbody").append(trHtml);

				}
			}
			
			// 重置表单
			function undo(){
				$("#lineNo").val('');  			
				$("#printContent").val('');    
			}

			function editFrom(lineNo){
				console.log("编辑打印内容，行号："+lineNo);
                $.mobile.changePage("#page3", { transition: "slide"},true);
				if(prinContentList.length==0)
				{
				    return ;
				}

				for(var i=0;i<prinContentList.length;i++){
					if(prinContentList[i].lineNo==lineNo){
						$("#lineNo").val(prinContentList[i].lineNo);    
						$("#printContent").val(prinContentList[i].printContent);     
						$("#fontsize").val(prinContentList[i].fontsize);    
						$("#duiji").val(prinContentList[i].duiji);   
						$("#prinType").val(prinContentList[i].prinType);    
						$("#ifVisibelYiweimaContent").val(prinContentList[i].ifVisibelYiweimaContent);  
					}
				}
				

			}


			// 删除记录
			function deleteRecord(lineNo)
			{
				console.log("删除打印内容，行号："+lineNo);
				if(prinContentList.length==0)
				{
				    return ;
				}

				for(var i=0;i<prinContentList.length;i++){
					if(prinContentList[i].lineNo==lineNo){
						console.log("删除prinContentList数组元素，索引："+i);
						prinContentList.splice(i,1);
					}
				}

				showTable();
			}

			function printBtn(){
				//let pageType = $(":radio[name='pageType'][checked]").val();
				let pageType=$("input[name='pageType']:checked").val();
				console.log(pageType);
                let strJson=JSON.stringify(prinContentList);
				window.customPrintAndroidInterface.printcustomprintJson(strJson)

			}
			
			
		</script>
	</head>

	<body>
		<div data-role="page" id="page1">
		  <div data-role="header">
			<h1>客户自定义打印</h1>
			<div data-role="navbar">
			  <ul>
				<li><a href="#page1" data-icon="home">使用说明</a></li>
				<li><a href="#page2" data-icon="arrow-r">记录表格</a></li>
				<li><a href="#page3" data-icon="search">添加修改</a></li>
			  </ul>
			</div>
		  </div>

		  <div data-role="main" class="ui-content">
			<p>使用说明</p>
			<p>1.新增或者编辑时，行号相同，会覆盖旧的内容</p>
			<p>2.按照 表格展示的行顺序打印</p>
		  </div>

		  <div data-role="footer">
			<h1>我的底部</h1>
		  </div>
		</div> 
		

		<div data-role="page" id="page2">
		  <div data-role="header">
			<h1>客户自定义打印</h1>
			<div data-role="navbar">
			  <ul>
				<li><a href="#page1" data-icon="home">使用说明</a></li>
				<li><a href="#page2" data-icon="arrow-r">记录表格</a></li>
				<li><a href="#page3" data-icon="search">添加修改</a></li>
			  </ul>
			</div>
		  </div>

		  <div data-role="main" class="ui-content">
			  <div>
				<div class="ui-grid-a">
					<div class="ui-block-a">
										  <p>纸张类型:</p>
										  <br/>
								  <input type="radio" name="pageType" id="pageType1" value="1" checked /><label for="pageType1">间隔标签纸</label>
								  <input type="radio" name="pageType" id="pageType2" value="2" /><label for="pageType2">热敏</label>
					</div>
			  
					<div class="ui-block-b">
					   <div ><button onclick="printBtn()">打印</button></div>
					</div>
			  </div>	
			   
				  
			  </div>
			<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable">
				<thead>
				  <tr>
					<th>行号</th>
					<th >打印内容</th>
					<th >编辑</th>
					<th data-priority="1">对齐方式</th>

				  </tr>
				</thead>
				<tbody>
				  <tr>
					<td>1</td>
					<td>默认情况下，jQuery Mobile 会先隐藏表格右侧的列。但是，你可以在表格头部通过添加 data-priority 属性指定隐藏列的顺序，data-priority 的值可以是 1 (最高优先级) 到 6 (最低优先级)</td>
					<td>编辑</td>
					<td>Obere Str. 57</td>
	
				  </tr>
				  <tr>
					<td>2</td>
					<td>打印内容</td>
					<td> 编辑</td>
					<td>字体大小</td>

				  </tr>		  
				</tbody>
			  </table>
		  </div>

		  <div data-role="footer">
			<h1>我的底部</h1>
		  </div>
		</div> 
		
		<div data-role="page" id="page3">
		  <div data-role="header">
			<h1>客户自定义打印</h1>
			<div data-role="navbar">
			  <ul>
				<li><a href="#page1" data-icon="home">使用说明</a></li>
				<li><a href="#page2" data-icon="arrow-r">记录表格</a></li>
				<li><a href="#page3" data-icon="search">添加修改</a></li>
			  </ul>
			</div>
		  </div>

		  <div data-role="main" class="ui-content">
			<p>请编辑自定义打印内容</p>
			<input type="text" name="lineNo" id="lineNo" placeholder="行号（相同行号的内容会被新的覆盖）">
			<input type="text" name="printContent" id="printContent" placeholder="打印内容...">
		    <label for="fontsize">字体大小：</label>
			<select name="fontsize" id="fontsize">  
				<option value="1" selected>1</option>  
				<option value="2">2</option>  
				<option value="3">3</option> 
		   </select>  
		    <label for="duiji" >对齐方式：</label>
			<select name="duiji" id="duiji">  
				<option value="1" selected>居中</option>  
				<option value="2">左对齐</option>  
				<option value="3">右对齐</option> 
		   </select>  	
		    <label for="prinType" >打印类型：</label>
			<select name="prinType" id="prinType">  
				<option value="1" selected>文本</option>  
				<option value="2">一维码</option>  
		   </select>  
		    <label for="ifVisibelYiweimaContent">是否显示一维码内容：</label>
			<select name="ifVisibelYiweimaContent" id="ifVisibelYiweimaContent">  
				<option value="1" selected>否</option>  
				<option value="2">是</option>  
		   </select>  
         <br/>		   
			<div data-role="controlgroup" data-type="horizontal">
			  <a href="#" class="ui-btn" onclick="undo()">重置</a>
			  <a href="#" class="ui-btn" onclick="getFormValue()">提交保存</a>
			</div><br>
		   
		   
		  </div>

		  <div data-role="footer">
			<h1>我的底部</h1>
		  </div>
		</div> 
		

	</body>

</html>